<!--
 * @Author: Wushiqi
 * @Descripttion: 
 * @Date: 2020-07-27 23:42:32
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-22 22:15:08
-->
<template>
  <div class="navbar-comtainer">
    <div class="logo" @click="$router.push('/')">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div>
      <p>
        请输入内容
        <van-icon class="ipt-icon" name="search" />
      </p>
    </div>
    <div>
      <img v-if="msgUrl" :src="msgUrl" alt="" style="border-radius: 50%" @click="$router.push('/edit')">
      <img v-else src="@/assets/default_img.jpg" alt="" style="border-radius: 50%" @click="$router.push('/login')">
      <p>下载App</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgUrl: ''
    }
  },
  created() {
    if (localStorage.getItem('token')) {
      this.getUserInfo()
    }
  },
  methods: {
    // 进入页面获取用户信息
    async getUserInfo() {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      this.msgUrl = res.data[0].user_img
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar-comtainer {
  height: 12.5vw;
  background-color: white;
  width: 100%;
  display: flex;
  .logo {
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
    }
  }
  div:nth-child(2) {
    flex: 1;
    display: flex;
    // justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    margin: 0 1.389vw;
    p {
      height: 7.778vw;
      line-height: 8.056vw;
      padding: 0 8.333vw;
      font-size: 3.333vw;
      background-color: #f4f4f4;
      width: 100%;
      position: relative;
      border-radius: 2.778vw;
      color: #aaa;
      .ipt-icon {
        position: absolute;
        left: 2.778vw;
        top: 50%;
        transform: translate(0, -40%);
      }
    }
  }
  div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 6.667vw;
      height: 6.667vw;
    }
    p {
      background-color: #fb7299;
      color: white;
      font-size: 3.611vw;
      padding: 1.389vw 2.778vw;
      margin: 0 2.222vw;
      border-radius: 0.833vw;
    }
  }
}
</style>